<template>
  <div class="user">
    <PageHeader 
      :formConfig='formConfig'
      @selectClick="handleSelectClick"
      @resetClick="handleResetClick"/>

    <PageContent  
      :tableConfig="tableConfig"
      tableName="users" 
      ref="pageContentRef"
      @createClick="handleCreateClick"
      @editeClick="handleEditeClick"
      />

    <PageDialog
      ref="pageDialogRef"
      tableName="users" 
      :dialogConfig="dialogConfig"
      :editeData="editeData"
    />
  </div>
</template>

<script setup lang="ts">
import PageHeader from '@/components/page-header/PageHeader.vue';
import PageContent from '@/components/page-content/PageContent.vue';
import PageDialog from '@/components/page-dialog/PageDialog.vue';

import { formConfig } from './config//form-config'
import { tableConfig } from './config/table-config'
import { dialogConfig } from './config/dialog-config';
import { useTableStore } from '@/store';

import useSearch from '@/hooks/useSearch';
import useDialog from '@/hooks/useDialog'

const [handleSelectClick,handleResetClick,pageContentRef] = useSearch()

const formItems = dialogConfig.formItems
const pwdItem = dialogConfig.formItems.find(item => item.field === 'password')

const tableStore = useTableStore()
const addRoleAndDepartment = () => {
  const departmentItem = formItems.find(item => item.field === 'departmentId')
  if(departmentItem){
    departmentItem.options = tableStore.departmentList.map((item:any) => {
      return {
        title:item.name,
        value:item.id
      }
    })
  }
  const roleItem = formItems.find(item => item.field === 'roleId')
  if(roleItem){
    roleItem.options = tableStore.roleList.map((item:any) => {
      return {
        title:item.name,
        value:item.id
      }
    })
  }
}
const createCb = () => {
  if(pwdItem){
    pwdItem.isHidden = false
  }
  addRoleAndDepartment()
}
const editeCb = () => {
  if(pwdItem){
    pwdItem.isHidden = true
  }
  addRoleAndDepartment()
}
const [pageDialogRef, editeData,handleCreateClick,handleEditeClick] = useDialog(createCb,editeCb)

</script>

<style scoped>

</style>